<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Integrated Online Ticketing and Reservation</title>
        <style type="text/css">
 body {
margin-left: 100px;
margin-top: 80px;
margin-right: 100px;
margin-bottom: 0px;

}
                  
        </style>
    </h:head>
    
    <h:body>
        <h:form>
        <p:breadCrumb>  
            <p:menuitem value="" url="index.xhtml" />
            <p:menuitem value="Table Booking" url="TableBooking.xhtml" />  
            <p:menuitem value="Non-Deliverable Meal Purchase" url="MealPurchase.xhtml" />  
            <p:menuitem value="Deliverable Meal Purchase" url="deliverableMealPurchase.xhtml" /> 
            <p:menuitem value="Group Buying Item" url="GroupBuying.xhtml"/>
            <p:menuitem value="Buy Loyalty Points" url="BuyLoyaltyPoints.xhtml"/>
        </p:breadCrumb>  
        </h:form>
        <h2> Dear <h:outputText value="#{fakeMainPortalMB.customerEmail}"/> Welcome to <h:outputText value="#{fakeMainPortalMB.outletId}"/>  </h2>
        
        <h:form id="form1" style="background-color:#EEF3E2">
            <br/><h:outputText value="#{tableBookingMB.noShowPenalty}"/><br/><br/>
            <table border="2" style="background-color:#BEC8D1"><tr><th>Enter Date(MM/DD/YYYY) Booking Period:
                        <h:outputText value="#{tableBookingMB.startDate}"/> -- <h:outputText value="#{tableBookingMB.endDate}"/>
                           </th><th>Choose Area</th><th></th><th>Available Timeslots</th><th>Comments</th><th>Book this table</th></tr>
                
                <tr><td><h:inputText id ="date" value="#{tableBookingMB.date}" style="color: Yellow; background: Teal" /></td>        
                    <td><h:selectOneMenu id="area" value="#{tableBookingMB.areaName}"  style="color: Yellow; background: Teal">
                            <f:selectItem itemValue="default" itemLabel="--Please select one--"/>
                            <f:selectItems value="#{tableBookingMB.areaNames}"/>                 
                        </h:selectOneMenu></td>    
                    <td><h:commandButton value="Get availabe time slots" >
                            <f:ajax execute="date area" render="timeslots"/>
                        </h:commandButton></td>
                    <td><h:selectOneMenu id="timeslots" value="#{tableBookingMB.timeslot}"  style="color: Yellow; background: Teal">
                        <f:selectItem itemValue="default" itemLabel="--Please select one--"/>
                        <f:selectItems value="#{tableBookingMB.timeslots}" />
                        </h:selectOneMenu></td>
                    
                    <td><h:inputText id="comments" value="#{tableBookingMB.comments}" style="color: Yellow; background: Teal"/></td>
                    <td><h:commandButton value="Book this table" action="BookingStatus?faces-redirect=true" style="font-weight:bold">
                         
                        </h:commandButton></td></tr>
                </table>  
        <br/><br/>
        </h:form>
        
        <br/><br/>
        <h:form id="form3" style="background-color:#EEF3E2">          
        </h:form>
        
    </h:body>
    
</html>

